<template>
  <div style="padding: 20px">
    <div class="three-one-header">
      <span style="font-size: large; font-weight: bolder; float: left;">我的下载:</span>
      <el-input
        placeholder="请输入搜索关键词"
        v-model="input"
        size="small"
        clearable
        prefix-icon="el-icon-search"
        @keyup.enter.native="searchdownload"
      >
        <el-button
          slot="append"
          size="small"
          type="primary"
          plain
          @click="searchdownload"
        >
          搜索
        </el-button>
      </el-input>
    </div>
    <div class="three-one-body">
      <div
        v-if="fileForm[0]"
        style="
          margin-top: 20px;
          display: flex;
          width: 100%;
          height: 100%;
          flex-wrap: wrap;
          overflow: auto;
        "
      >
        <div
          v-for="(item, index) in fileForm"
          :key="index"
          style="height: 150px; width: 130px; margin-right: 10px"
        >
          <div style="height: 60px; width: 60px; margin: 0 auto">
            <img
              :src="
                require('@/assets/image/myself/' +
                  matchfileSuffixType(item.fileSuffix) +
                  '.png')
              "
              alt=""
              style="width: 60px; height: 60px"
            />
          </div>
          <div
            style="
              text-align: center;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            "
          >
            <span style="font-size: 12px">{{ item.fileName }}</span>
          </div>
          <div style="margin-top: 10px">
            <button class="btn-preview" @click="filePreview(item.fileId)">预览</button>
            <button
              class="btn-download"
              @click="fileDownload(item.fileId, item.fileName, item.fileSuffix)"
            >
              下载
            </button>
          </div>
        </div>
      </div>
      <div v-else>
        <span>你的下载为空，赶快去下载吧</span>
      </div>
    </div>
  </div>
</template>
<script>
  import {getMydownloadData,getMydownloadSearch,getFileDownload} from "@/api/myself/myself";
export default {
  data() {
    return {
      input: "",
      userId: this.$store.getters.userId,
      imageUrl: "",
      fileForm: [
        {
          fileName: "帅saasfdasfsdfasdfasdfsfsdafsfsfs哥",
          fileSuffix: "doc",
          fileId: 1,
        },
        {
          fileName: "word",
          fileSuffix: "xls",
          fileId: 2,
        },
        {
          fileName: "你asdfasdfsaas好",
          fileSuffix: "pdf",
          fileId: 3,
        },
        {
          fileName: "你asdfasdfsaas好",
          fileSuffix: "jpgsad",
          fileId: 4,
        },
      ],
    };
  },
  methods: {
    // 预览方法
    filePreview(fileId) {
      this.$router.push({
        path:'/docdetail',
        query: {
           id:fileId
        }
      })
    },
    // 搜索功能实现
    searchdownload() {
      let data = {
        inputString: this.input,
        userId: this.userId,
      };
      getMydownloadSearch(data)
        .then((res) => {
          console.log(res);
          this.fileForm = [];
          for (let i in res.data) {
            this.fileForm.push(res.data[i]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 下载文件
    fileDownload(fileId, fileName, fileSuffix) {
      let data = {
        userId: this.userId,
        fileId: fileId,
      };
      getFileDownload(data)
        .then((res) => {
          if (res.size === 0) {
              this.$message({
                message:'你的文件丢失了',
                type:'error'
              })
              return;
           }
          const blob = new Blob([res], { type: " application/octet-stream" });
          if ("download" in document.createElement("a")) {
            //非Ie下载
            let fileLink = document.createElement("a");
            let fileURL = window.URL.createObjectURL(blob);
            fileLink.href = fileURL;
            fileLink.setAttribute("download", fileName + "." + fileSuffix);
            document.body.appendChild(fileLink);
            fileLink.click();
            window.URL.revokeObjectURL(fileLink.href); //释放URL对象
            document.body.removeChild(fileLink);
          } else {
            navigator.msSaveBlob(blob, fileName);
          }
          console.log(res);
          if (res === "") window.alert("你下载的文件丢失了");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    let data = {
      userId: this.userId,
    };
    // 获取我的下载界面数据
    getMydownloadData(data)
      .then((res) => {
        console.log(res);
        this.fileForm = [];
        for (let i in res.data) {
          this.fileForm.push(res.data[i]);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>
.three-one-header {
  height: 32x;
  margin: 10px 40px;

}

h {
  font-size: large;
  font-weight: bolder;
}

.el-input {
  width: 300px;
  margin:0 auto;
  border-radius: 20%;
}

.el-button {
  color: rgb(22, 155, 213);
}

.three-one-body {
  width: 100%;
  height: 100%;
  margin-top: 30px;
}

.btn-preview {
  height: 25px;
  width: 40px;
  float: left;
  background-color: rgb(0, 178, 129);
  margin-left: 20px;
  border-style: none;
  font-weight: bold;
  color: aliceblue;
  border-radius: 5px;
  cursor: pointer;
}

.btn-download {
  height: 25px;
  width: 40px;
  float: right;
  background-color: rgb(22, 155, 213);
  margin-right: 20px;
  border-style: none;
  font-weight: bold;
  color: aliceblue;
  border-radius: 5px;
  cursor: pointer;
}
</style>
